<template>
	<view class="title_view" :style="'height:'+totalHeight+'px;'">
		<view class="title bh-row bh-justify-space-between "
			:style="'height:'+titleHeight+'px;padding-top:'+capsuleTop+'px'">
			<view v-if="showRetIcon == true" class="left_arrow_box" @click="back">
				<image src="../../static/images/left_arrow.svg" mode=""></image>
			</view>
			<view v-else class="left_arrow_box" >
				
			</view>
			<view class="edit-info">{{titleText}}</view>
			<view class="" style="width: 80rpx;"></view>
		</view>
		<view :style="{position: 'fixed',top: titleHeight + 'px',backgroundColor: '#F5F9FA',width: '100%',zIndex:200}">
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'BhTitle',
		emits: ['clickBack'],
		props: {
			titleText: {
				type: String,
				default: 0
			},
			showRetIcon: {
				type: Boolean,
				default: true
			},
			slotHeight: {
				type: Number,
				default: 0
			},
			customClickBack: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return{
				capsuleHeight: 0,
				capsuleTop: 0,
				titleHeight: 0,
				totalHeight: 0,
			}
		},
		created() {
			console.log('闯入的参数', this.showRetIcon)
			let capsule = wx.getMenuButtonBoundingClientRect()
			this.capsuleTop = capsule.top
			console.log(capsule)
			this.capsuleHeight = capsule.height
			this.titleHeight = capsule.height + 10 + capsule.top
			this.totalHeight = this.titleHeight + this.slotHeight
		},
		methods: {
			back(){
				if(this.customClickBack == 1){
					this.$emit('clickBack')
				}else{
					uni.navigateBack()
				}
			}
		},

	}
</script>
<style scoped lang="scss">
	@import url(../../static/css/base.css);

	.title_view {
		.title {
			height: 40rpx;
			font-size: 36rpx;
			color: #000;
			padding: 0 30rpx 10px 30rpx;
			box-sizing: border-box;
			font-weight: 600;
			background: linear-gradient(171deg, #FFF6D4 19%, #F5F9FA 50%);
			background-color: #F5F9FA;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 200;
			.left_arrow_box {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 22rpx;
					height: 38rpx;
					margin: 21rpx 0;
				}
			}
		}
	}
</style>